<template>
  <div class="feedback-layout">
    <div class="header">
      <h2>反馈管理</h2>
    </div>
    <el-card>
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="用户体验反馈" name="experience" />
        <el-tab-pane label="答题疑惑反馈" name="question" />
        <el-tab-pane label="我的反馈回复" name="responses" />
      </el-tabs>
      <router-view />
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AdminFeedbackLayout',
  data() {
    return {
      activeTab: this.getInitialTab()
    }
  },
  watch: {
    '$route.name'(val) {
      this.activeTab = this.getTabFromRoute(val)
    }
  },
  methods: {
    getInitialTab() {
      const routeName = this.$route.name
      return this.getTabFromRoute(routeName)
    },
    getTabFromRoute(routeName) {
      switch(routeName) {
        case 'admin-feedback-experience':
          return 'experience'
        case 'admin-feedback-question':
          return 'question'
        case 'admin-feedback-responses':
          return 'responses'
        default:
          return 'experience'
      }
    },
    handleTabClick(tab) {
      const routeMap = {
        'experience': 'admin-feedback-experience',
        'question': 'admin-feedback-question',
        'responses': 'admin-feedback-responses'
      }
      this.$router.push({ name: routeMap[tab.paneName] })
    }
  }
}
</script>

<style scoped>
.feedback-layout {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
  color: #303133;
}

.el-card {
  margin-top: 20px;
}
.el-card:hover{
  box-shadow: 0 4px 19px rgba(0, 0, 0, 0.25);
}

</style>
